<template>
  <el-submenu v-if="isSubmenu" :index="computedIndex">
    <template slot="title">{{ item.name }}</template>
    <MultiLevelMenu
      v-for="(subItem, subIndex) in item.childrenList"
      :key="subIndex"
      :item="subItem"
      :index="computeChildIndex(subIndex)"
      :level="level + 1"
    />
  </el-submenu>
  <el-menu-item v-else :index="computedIndex">
    {{ item.name }}
  </el-menu-item>
</template>

<script>
export default {
  name: "MultiLevelMenu",
  props: {
    item: Object,
    index: String,
    level: Number,
  },
  computed: {
    isSubmenu() {
      return Array.isArray(this.item.childrenList);
    },
    computedIndex() {
      if (this.level === 0) {
        return (this.index).toString();
      } else if (this.$parent && typeof this.$parent.computedIndex === 'string') {
        return `${this.$parent.computedIndex}-${this.index}`;
      } else {
        return (this.index).toString();
      }
    },
  },
  methods: {
    computeChildIndex(subIndex) {
      if (this.level === 0) {
        return subIndex.toString();
      } else if (typeof this.computedIndex === 'string') {
        return `${this.computedIndex}-${subIndex}`;
      } else {
        // Handle the case where computedIndex is not defined
        return subIndex.toString();
      }
    },
  },
};
</script>
